<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="top.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的购物车</title>
<link rel="stylesheet" type="text/css" href="css/table.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</head>
<body>

<c:if test="${empty shoppingCart }">
<div class="main" style="text-align: center;color: white;">
	<img src="imgs/enptyCart.png" style="width: 100%;position: relative;">
	<div class="text" style="position: absolute;right: 28%;top:34%;color: white;">
		<h2 style="letter-spacing: 2px;">购物车还木有商品哟~<br>快去添加吧！</h2>
		<button style="font-size: 22px;margin-top: 1.5em;padding: 0.3em 1.5em;letter-spacing: 1px;background-color: transparent;
          border: 0;cursor: pointer;z-index: 999;border: 2px solid white;border-radius: 5px;text-shadow: 4px 4px 4px pink;transition: opacity 0.2s ease;
">       	<a href="goodsList.do"><strong style="color: white;">添加</strong></a>
		</button>
	</div>
</div>

</c:if>
<c:if test="${not empty shoppingCart }">
<div class="limiter">
	<div class="container-table100">
		<div class="wrap-table100">
			<div class="table">
				<div class="row header">
					<div class="cell"></div>
					<div class="cell">商品名</div>
					<div class="cell">评价</div>
					<div class="cell">价格</div>
					<div class="cell">图片</div>
					<div class="cell">喜欢人数</div>
					<div class="cell">操作</div>
				</div>
				<c:forEach var="item" items="${shoppingCart }">
				<div class="row">
					<div class="cell"><input type="checkbox" class="checkbox" price="${item.value.goods.newprice }"></div>
					<div class="cell name" pid="${item.value.goods.pid }">${item.value.goods.name }</div>
					<div class="cell">${item.value.goods.comments }</div>
					<div class="cell price">${item.value.goods.newprice }</div>
					<div class="cell" style="position: relative;background: url(${item.value.goods.imgpath });background-size:80px 60px;
	background-repeat:no-repeat;background-position: center;">
					</div>
					<div class="cell">${item.value.count }</div>
					<div class="cell"><a href="removeFromCart.do?pid=${item.key }">移除</a></div>
				</div>
</c:forEach>
				<div class="row">
						<div class="cell"></div>
						<div class="cell"></div>
						<div class="cell"></div>
						<div class="cell"></div>
						<div class="cell"></div>
						<div class="cell"></div>
						<div class="cell" width="300px">总计：<strong id="total"></strong></div>
				</div>
			</div>
		</div>
	</div>
</div>
</c:if>
<script type="text/javascript">
getTotallPrice();
//checkbox变化了就更新总的价格
$("input.checkbox").each(function(){
	$(this).bind('click',function(event){
		getTotallPrice();
	});
});	

//给每个商品名称添加一个连接
$('div.name').each(function(){
	var pid = parseInt($(this).attr('pid'));
	$(this).css('color','blue');
    $(this).bind('click', function(event) {
        window.open('details.do?pid='+pid,'_self');
    });
	
});

	
//计算每个选中的总的价格
function getTotallPrice(){
	var price =0;
	$("input.checkbox").each(function(index,elem){
		if($(this).attr("checked",true)){
			var i = parseFloat($(this).attr('price'));
			price = price + i;	
		}
		$('#total').html(price+"元");
		$('#total').css('color','black');
	});
}	


</script>
</body>
</html>